<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>iconfont Demo</title>
  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/>
  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/>
  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  <link rel="stylesheet" href="demo.css">
  <link rel="stylesheet" href="iconfont.css">
  <script src="iconfont.js"></script>
  <!-- jQuery -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
  <!-- 代码高亮 -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
  <style>
    .main .logo {
      margin-top: 0;
      height: auto;
    }

    .main .logo a {
      display: flex;
      align-items: center;
    }

    .main .logo .sub-title {
      margin-left: 0.5em;
      font-size: 22px;
      color: #fff;
      background: linear-gradient(-45deg, #3967FF, #B500FE);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  </style>
</head>
<body>
  <div class="main">
    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
      
        <span class="sub-title">彩色字体</span>
      
    </a></h1>
    <div class="nav-tabs">
      <ul id="tabs" class="dib-box">
        <li class="dib active"><span>Unicode</span></li>
        <li class="dib"><span>Font class</span></li>
        <li class="dib"><span>Symbol</span></li>
      </ul>
      
      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=3791153" target="_blank" class="nav-more">查看项目</a>
      
    </div>
    <div class="tab-container">
      <div class="content unicode" style="display: block;">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
              <span class="icon iconL">&#xe622;</span>
                <div class="name">垃圾桶</div>
                <div class="code-name">&amp;#xe622;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconL">&#xe610;</span>
                <div class="name">搜索</div>
                <div class="code-name">&amp;#xe610;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconL">&#xe60e;</span>
                <div class="name">小三角down</div>
                <div class="code-name">&amp;#xe60e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconL">&#xe60f;</span>
                <div class="name">小三角up</div>
                <div class="code-name">&amp;#xe60f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconL">&#xe639;</span>
                <div class="name">箭头_三角下</div>
                <div class="code-name">&amp;#xe639;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconL">&#xe6c0;</span>
                <div class="name">消息</div>
                <div class="code-name">&amp;#xe6c0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconL">&#xe614;</span>
                <div class="name">店铺</div>
                <div class="code-name">&amp;#xe614;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconL">&#xe61d;</span>
                <div class="name">前进</div>
                <div class="code-name">&amp;#xe61d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconL">&#xe73d;</span>
                <div class="name">购物车</div>
                <div class="code-name">&amp;#xe73d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconL">&#xe78e;</span>
                <div class="name">向左回退</div>
                <div class="code-name">&amp;#xe78e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconL">&#xe62a;</span>
                <div class="name">搜索</div>
                <div class="code-name">&amp;#xe62a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconL">&#xe75d;</span>
                <div class="name">购物车</div>
                <div class="code-name">&amp;#xe75d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconL">&#x100d5;</span>
                <div class="name">我的-copy-copy</div>
                <div class="code-name">&amp;#x100d5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconL">&#xec0a;</span>
                <div class="name">首页</div>
                <div class="code-name">&amp;#xec0a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconL">&#x100d4;</span>
                <div class="name">我的-copy</div>
                <div class="code-name">&amp;#x100d4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconL">&#xe6da;</span>
                <div class="name">KHCFDC_首页</div>
                <div class="code-name">&amp;#xe6da;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconL">&#xe607;</span>
                <div class="name">首页</div>
                <div class="code-name">&amp;#xe607;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconL">&#xe624;</span>
                <div class="name">星星</div>
                <div class="code-name">&amp;#xe624;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconL">&#x100d1;</span>
                <div class="name">首页-copy</div>
                <div class="code-name">&amp;#x100d1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconL">&#x100d3;</span>
                <div class="name">星星-copy</div>
                <div class="code-name">&amp;#x100d3;</div>
              </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="unicode-">Unicode 引用</h2>
          <hr>

          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
          <ul>
            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
          </ul>
          <blockquote>
            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
          </blockquote>
          <p>Unicode 使用步骤如下：</p>
          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
  font-family: 'iconL';
  src: 
       url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
       url('iconfont.woff?t=1669456280477') format('woff'),
       url('iconfont.ttf?t=1669456280477') format('truetype');
}
</code></pre>
          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.iconL {
  font-family: "iconL" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="iconL"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
          <blockquote>
            <p>"iconL" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
          </blockquote>
          </div>
      </div>
      <div class="content font-class">
        <ul class="icon_lists dib-box">
          
          <li class="dib">
            <span class="icon iconL icon-lajitong"></span>
            <div class="name">
              垃圾桶
            </div>
            <div class="code-name">.icon-lajitong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconL icon-sousuo1"></span>
            <div class="name">
              搜索
            </div>
            <div class="code-name">.icon-sousuo1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconL icon-xiaosanjiaodown"></span>
            <div class="name">
              小三角down
            </div>
            <div class="code-name">.icon-xiaosanjiaodown
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconL icon-xiaosanjiaoup"></span>
            <div class="name">
              小三角up
            </div>
            <div class="code-name">.icon-xiaosanjiaoup
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconL icon-jiantousanjiaoxia"></span>
            <div class="name">
              箭头_三角下
            </div>
            <div class="code-name">.icon-jiantousanjiaoxia
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconL icon-xiaoxi"></span>
            <div class="name">
              消息
            </div>
            <div class="code-name">.icon-xiaoxi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconL icon-4"></span>
            <div class="name">
              店铺
            </div>
            <div class="code-name">.icon-4
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconL icon-qianjin"></span>
            <div class="name">
              前进
            </div>
            <div class="code-name">.icon-qianjin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconL icon-gouwuche1"></span>
            <div class="name">
              购物车
            </div>
            <div class="code-name">.icon-gouwuche1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconL icon-a-ziyuan558"></span>
            <div class="name">
              向左回退
            </div>
            <div class="code-name">.icon-a-ziyuan558
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconL icon-sousuo"></span>
            <div class="name">
              搜索
            </div>
            <div class="code-name">.icon-sousuo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconL icon-gouwuche"></span>
            <div class="name">
              购物车
            </div>
            <div class="code-name">.icon-gouwuche
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconL icon-biaoqianA01_wode-90-copy-copy"></span>
            <div class="name">
              我的-copy-copy
            </div>
            <div class="code-name">.icon-biaoqianA01_wode-90-copy-copy
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconL icon-home"></span>
            <div class="name">
              首页
            </div>
            <div class="code-name">.icon-home
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconL icon-biaoqianA01_wode-90-copy"></span>
            <div class="name">
              我的-copy
            </div>
            <div class="code-name">.icon-biaoqianA01_wode-90-copy
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconL icon-shouye3"></span>
            <div class="name">
              KHCFDC_首页
            </div>
            <div class="code-name">.icon-shouye3
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconL icon-shouye"></span>
            <div class="name">
              首页
            </div>
            <div class="code-name">.icon-shouye
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconL icon-xingxing"></span>
            <div class="name">
              星星
            </div>
            <div class="code-name">.icon-xingxing
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconL icon-shouye1-copy"></span>
            <div class="name">
              首页-copy
            </div>
            <div class="code-name">.icon-shouye1-copy
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconL icon-xingxing-copy"></span>
            <div class="name">
              星星-copy
            </div>
            <div class="code-name">.icon-xingxing-copy
            </div>
          </li>
          
        </ul>
        <div class="article markdown">
        <h2 id="font-class-">font-class 引用</h2>
        <hr>

        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
        <p>与 Unicode 使用方式相比，具有如下特点：</p>
        <ul>
          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="iconL icon-xxx"&gt;&lt;/span&gt;
</code></pre>
        <blockquote>
          <p>"
            iconL" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
        </blockquote>
      </div>
      </div>
      <div class="content symbol">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-lajitong"></use>
                </svg>
                <div class="name">垃圾桶</div>
                <div class="code-name">#icon-lajitong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sousuo1"></use>
                </svg>
                <div class="name">搜索</div>
                <div class="code-name">#icon-sousuo1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiaosanjiaodown"></use>
                </svg>
                <div class="name">小三角down</div>
                <div class="code-name">#icon-xiaosanjiaodown</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiaosanjiaoup"></use>
                </svg>
                <div class="name">小三角up</div>
                <div class="code-name">#icon-xiaosanjiaoup</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jiantousanjiaoxia"></use>
                </svg>
                <div class="name">箭头_三角下</div>
                <div class="code-name">#icon-jiantousanjiaoxia</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiaoxi"></use>
                </svg>
                <div class="name">消息</div>
                <div class="code-name">#icon-xiaoxi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-4"></use>
                </svg>
                <div class="name">店铺</div>
                <div class="code-name">#icon-4</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-qianjin"></use>
                </svg>
                <div class="name">前进</div>
                <div class="code-name">#icon-qianjin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gouwuche1"></use>
                </svg>
                <div class="name">购物车</div>
                <div class="code-name">#icon-gouwuche1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-ziyuan558"></use>
                </svg>
                <div class="name">向左回退</div>
                <div class="code-name">#icon-a-ziyuan558</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sousuo"></use>
                </svg>
                <div class="name">搜索</div>
                <div class="code-name">#icon-sousuo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gouwuche"></use>
                </svg>
                <div class="name">购物车</div>
                <div class="code-name">#icon-gouwuche</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-biaoqianA01_wode-90-copy-copy"></use>
                </svg>
                <div class="name">我的-copy-copy</div>
                <div class="code-name">#icon-biaoqianA01_wode-90-copy-copy</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-home"></use>
                </svg>
                <div class="name">首页</div>
                <div class="code-name">#icon-home</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-biaoqianA01_wode-90-copy"></use>
                </svg>
                <div class="name">我的-copy</div>
                <div class="code-name">#icon-biaoqianA01_wode-90-copy</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shouye3"></use>
                </svg>
                <div class="name">KHCFDC_首页</div>
                <div class="code-name">#icon-shouye3</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shouye"></use>
                </svg>
                <div class="name">首页</div>
                <div class="code-name">#icon-shouye</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xingxing"></use>
                </svg>
                <div class="name">星星</div>
                <div class="code-name">#icon-xingxing</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shouye1-copy"></use>
                </svg>
                <div class="name">首页-copy</div>
                <div class="code-name">#icon-shouye1-copy</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xingxing-copy"></use>
                </svg>
                <div class="name">星星-copy</div>
                <div class="code-name">#icon-xingxing-copy</div>
            </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="symbol-">Symbol 引用</h2>
          <hr>

          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
          <ul>
            <li>支持多色图标了，不再受单色限制。</li>
            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
          </ul>
          <p>使用步骤如下：</p>
          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
          </div>
      </div>

    </div>
  </div>
  <script>
  $(document).ready(function () {
      $('.tab-container .content:first').show()

      $('#tabs li').click(function (e) {
        var tabContent = $('.tab-container .content')
        var index = $(this).index()

        if ($(this).hasClass('active')) {
          return
        } else {
          $('#tabs li').removeClass('active')
          $(this).addClass('active')

          tabContent.hide().eq(index).fadeIn()
        }
      })
    })
  </script>
</body>
</html>
